<template>
  <BasicModal
    width="560px"
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    title="付款"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm">
      <template #f3="{}">
        <!-- <FormTitle text="承建方信息" /> -->
        <span style="margin-right: 30px">%</span><span>¥0.00</span>
        <!-- <a-input v-model:value="model[field]" placeholder="自定义slot" /> -->
      </template>
      <template #f4="{}">
        <FormTitle text="施工方信息" />
        <!-- <a-input v-model:value="model[field]" placeholder="自定义slot" /> -->
      </template>
    </BasicForm>
  </BasicModal>
</template>
<script lang="ts">
  import FormTitle from '../components/FormTitle.vue';
  import { defineComponent, ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { formSchema2 } from './role.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  // import { getContractorListApi } from '/@/api/zkrq/projectManagement';
  import { updateFlowPageApi } from '/@/api/zkrq/projectManagement';
  export default defineComponent({
    name: 'PaymentRecordSub',
    components: { FormTitle, BasicModal, BasicForm },
    props: {
      projectId: {
        type: Number,
        default: () => null,
      },
    },
    emits: ['success', 'register'],
    setup(props, { emit }) {
      const isUpdate = ref(true);

      const { createMessage } = useMessage();
      // const treeData = ref<TreeItem[]>([]);

      const [registerForm, { resetFields, updateSchema, validate }] = useForm({
        labelWidth: 90,
        baseColProps: { span: 24 },
        schemas: formSchema2,
        showActionButtonGroup: false,
      });
      const [registerDrawer, { setModalProps, closeModal }] = useModalInner(async (data) => {
        resetFields();
        setModalProps({ confirmLoading: false });

        isUpdate.value = !!data?.isUpdate;

        updateSchema([
          // {
          //   field: 'roleCode',
          //   label: '角色标识',
          //   dynamicDisabled: unref(isUpdate),
          //   component: 'Input',
          // },
          // {
          //   field: 'menu',
          //   ifShow: unref(isUpdate),
          // },
        ]);
        // if (unref(isUpdate)) {
        //   const res = await getRoleInfoApi(data?.record.roleId as string);
        //   updateInfo = res;

        //   const { userList } = res;
        //   if (userList && userList.length) {
        //     res.userList = userList.map((item) => item.userId);
        //   }
        //   setFieldsValue({
        //     ...res,
        //   });
        // }
      });

      // const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));

      async function handleSubmit() {
        const values = await validate();
        console.log('values:', values);
        return;
        try {
          const values = await validate();
          const { contractorId, projectId, constructionTeamId } = values;
          console.log('contractorId', contractorId);
          console.log('承建商--------无', projectId);
          console.log('承建商props', props.projectId);
          console.log('constructionTeamId', constructionTeamId);

          await updateFlowPageApi({
            contractorId: Number(contractorId),
            projectId: Number(props.projectId),
            constructionTeamId: Number(constructionTeamId),
          });
          setModalProps({ confirmLoading: true });
          closeModal();
          createMessage.success('操作成功');
          emit('success');
        } finally {
          setModalProps({ confirmLoading: false });
        }
      }

      return {
        registerDrawer,
        registerForm,
        // getTitle,
        handleSubmit,
      };
    },
  });
</script>
